<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/comm.css"/>
    <link rel="stylesheet" href="../css/user.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        .container {
            height: 70vh;
            width: 100%;
            background-color: white;
            border-radius: 0.8rem;
        }

        .user-card {
            margin: 1rem;
            padding: 1rem;
            border-radius: 0.5rem;
            text-align: center;
        }

        .user-avatar {
            max-width: 100%;
            border-radius: 50%;
        }
        .user-card img{
            width: 10rem;
            height: 10rem;
        }

        /* 样式调整 */
        .custom-input-group {
            margin-bottom: 1rem;
        }

        .custom-input-group .input-group-prepend,
        .custom-input-group .input-group-text {
            background-color: #a0c51f;
            color: #ffffff;
        }

        .custom-input-group .form-control {
            border-color: #a0c51f;
        }
    </style>
</head>
<body>
    <header>
        <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
    </header>
    <div id="app" class="container d-flex justify-content-around align-items-center">
        <div class="user-card pb-5">
            <!-- 修改头像选择框 -->
            <div class="custom-input-group" v-if="updateImg">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-default">修改头像</span>
                </div>
                <input type="file" class="form-control" @change="handleFileChange" accept="image/*" >
                <input class="btn btn-primary form-control" type="button" value="取消" @click="toUpdateImg()">
            </div>
            <!-- 修改头像选择框 -->
            <img class="user-avatar" :src="user.titleImg" alt="User Avatar" @click="toUpdateImg()">
            <!-- 姓名-->
            <h1 class="card-title" v-if="!updateName" @click="!toUpdateName()">{{ user.username }}</h1>
            <div class="input-group mb-3 mp-3" v-if="updateName" >
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-default">姓名</span>
                </div>
                <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" v-model="username">
                <input class="btn btn-primary ml-3" type="button" value="更改" @click="updataName()">
                <input class="btn btn-primary ml-3" type="button" value="取消" @click="toUpdateName()">
            </div>
            <!-- 姓名-->
            <!-- 签名-->
            <p class="card-text" v-if="!updateSign" @click="toUpdateSign()">
                {{ user.sign }}
            </p>
            <div class="input-group mb-3" v-if="updateSign">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-default">签名</span>
                </div>
                <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" v-model="sign">
                <input class="btn btn-primary ml-3" type="button" value="更改" @click="updataSign()" >
                <input class="btn btn-primary ml-3" type="button" value="取消" @click="toUpdateSign()">
            </div>
            <!-- 签名-->
        </div>
    </div>
    <footer>
        <!-- 这里放置页脚内容 -->
    </footer>
    <script>
        new Vue({
            el: "#app",
            data: {
                user: {// 用户信息
                    username: "",
                    titleImg: "",
                    sign: "",
                },
                updateName:false,// 更改的用户名
                updateSign:false,// 更改的用户签名
                updateImg:false,// 更改的用户头像地址
                username:"",// 用户名
                imgUrl:"",// 用户头像
                id:"",// 用户id
                sign:"",// 用户签名
                base64:""// 用户头像的base64数据

            },
            // 创建就调用
            created() {
                // 从session中获取用户信息
                this.user.username = sessionStorage.getItem('username');//用户名
                this.user.titleImg = sessionStorage.getItem("titleImg");// 头像
                this.user.sign = sessionStorage.getItem("sign");;// 签名
                this.id = sessionStorage.getItem("id")// 用户id
                // 这个通过id获取用户详情
                this.getUserInfo()
            },
            methods: {
                // 获取用户信息
                async getUserInfo(){
                    const response = await fetch('http://localhost:5000/user/getUserInfoById?id='+this.id);
                    const data = await response.json();
                    this.user.username = data.data[0]["nick_name"]
                    this.user.titleImg = data.data[0]["title_img"]
                    this.user.sign = data.data[0]["sign"]
                },
                //上传图片
                async putImg(){
                   
                   let jsonData = {
                       "base64":this.base64,// base64的图片数据
                       "url":"/user/"+this.id+"/avator.jpg"
                   }
                   const response = await fetch('http://localhost:5000/img/putImg',{
                   method: 'POST', // 指定请求方法为POST  
                   headers: {  
                       'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                   }, 
                   body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                   
                   });
                   // post
                   const data =await response.json()
                   // 返回的地址进行赋值
                   this.imgUrl = data.data
                   
               },
                // 更改名字
                updataName(){
                    if(this.username==""){
                        alert("内容不能为空哦")
                    }else{
                        // 只传入username字段
                        let data ={
                            "username":this.username,
                            "sign":"",
                            "imgUrl":"",
                            "id":this.id
                        }
                        // 调用更改方法
                        this.updateUser(data)
                        this.user.username = this.username
                        this.username = ""
                    }
                },
                 // 更改头像
                 updataImg(){
                    // 只传入头像地址
                    let data ={
                        "username":"",
                        "sign":"",
                        "imgUrl":this.imgUrl,
                        "id":this.id
                    }
                    // 调用更改方法
                    this.updateUser(data)
                    
                },
                // 更改签名
                updataSign(){
                    if(this.sign==""){
                        alert("内容不能为空哦")
                    }else{
                        // 只传入签名数据
                        let data ={
                            "username":"",
                            "sign":this.sign,
                            "imgUrl":"",
                            "id":this.id
                        }

                        // 调用更改方法
                        this.updateUser(data)
                        this.user.sign = this.sign
                        this.sign = ""
                    }
                },
                // 更改用户信息的函数
                async updateUser(jsonData){
                    const response = await fetch('http://localhost:5000/user/update',{
                    method: 'POST', // 指定请求方法为POST  
                    headers: {  
                        'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                    }, 
                    body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                });
                 // post
                 const data =await response.json()
                 if(data.code = 200){
                    alert("修改成功")
                 }
                },
                // 更改签名控制显示
                toUpdateSign(){
                    // 点击更改跳出，点击取消就不显示
                    if(this.updateSign==true){
                        this.updateSign = false
                    }else{
                        this.updateSign = true
                    }
                    
                },
                // 点击更改用户名的提示
                toUpdateName(){
                    // 点击更改跳出，点击取消就不显示
                    if(this.updateName==true){
                        this.updateName = false
                    }else{
                        this.updateName = true
                    }
                },
                // 点击更改用户头像的提示
                toUpdateImg(){
                    // 点击更改跳出，点击取消就不显示
                    if(this.updateImg==true){
                        this.updateImg = false
                    }else{
                        this.updateImg = true
                    }
                },
                // 传入图片的方法(就是点击上传头像)
                handleFileChange(event) {
                    // 获取头像文件
                    const file = event.target.files[0];
                    if (file) {
                        // Convert image to base64 and set as the user's titleImg
                        const reader = new FileReader();
                        // 下面是吧头像转为base64（同步，不是异步）
                        reader.onload = async (e) => {
                            this.user.titleImg = e.target.result;
                            let newBase64String = e.target.result.replace(/^data:image\/\w+;base64,/, "");  
                            this.base64= newBase64String
                            console.log(this.base64); // Print base64 data
                            await this.putImg()
                            await this.updataImg()
                        };
                        reader.readAsDataURL(file);
                    }
                },
            },
        });
    </script>
</body>
</html>
